<template>
  <view class="content">
    <view class="namechange">
      <view>
        <text>用户名</text>
      </view>
      <view style="margin-left: 20rpx;border-left:5rpx solid #ccc;padding-left:10rpx;">
        <u-input maxlength="8" placeholder="请输入用户名" :clearable="false" v-model="value" :type="type" :border="border" />
      </view>
    </view>
    <view style="margin-top:20rpx; margin-left:50rpx; color:#ccc;">
      最多限8个字符
    </view>
    <view @tap="nameback" class="yes">
      <text>确认</text>
    </view>
  </view>
</template>
<script>
import { updateUser, selectUser } from '@/api/main'
export default {
  data() {
    return {
      value: '当前用户名',
      type: 'text',
      border: false
    }
  },
  onShow() {
  },
  onLoad(e) {
    console.log('看看传参', e.name)
    this.value = e.name
  },
  methods: {
    nameback() {
      let obj = {
        userName: this.value
      }
      updateUser(obj).then(res => {
        console.log('修改用户名', res)
        uni.navigateBack({
          delta:0
        })
      })
    },
    getuser() {
      selectUser().then(res => {
        console.log('获取到用户信息', res)
        this.name = res.data.userName
        this.avatar = res.data.icon
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.content {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding: 20rpx;

  .namechange {
    background-color: white;
    border-radius: 198rpx;
    display: flex;
    padding: 20rpx;
    align-items: center;
  }

  .yes {
    width: 100%;
    text-align: center;
    padding: 30rpx;
    background-color: red;
    color: white;
    border-radius: 198rpx;
    margin-top: 200rpx;
  }
}
</style>